import React, { PureComponent } from 'react';
import { connect } from 'react-redux';
import { withRouter } from 'react-router-dom';
import BreadcrumbItem from '../../components/breadcrumbItem';
import ScoreSwiper from '../../components/scoreSwiper';
import FooterItem from '../../components/footerItem';
import styles from './style.module.scss';
import { actionCreators , actionTypes } from './store';
import { getQueryString, downloadFileFromLibrary } from '../../config/utils';
class ScoreParticulars extends PureComponent {
    constructor(props) {
        super(props);
        // let size = document.documentElement.clientWidth;
        // if (size <= 1192) {
        //     size = 1192
        // };
        this.state = {
            state: 1,
            loading: false
            // winWidth: size + 'px',
            // data: [
            //     {
            //         img:'http://mobuz-live.oss-cn-hangzhou.aliyuncs.com/songlibs/Z2eLeZEQIM.jpg'
            //     },
            //     {
            //         img:'http://mobuz-live.oss-cn-hangzhou.aliyuncs.com/songlibs/Z2eLeZEQIM.jpg'
            //     },
            // ]
        }
    }
    render() {
        const { state, loading} = this.state;
        const { scoreDetails, downloadScoreFromLibrary } = this.props;
        document.title = scoreDetails['name'] || '悦器社';
        return (
            <div className={styles['score-particulars']}>
                <div className={styles['score-container']}>
                    <BreadcrumbItem second={state === '2' ?  '最新' :'热门' }/>
                    <div className={styles['particulars']}>
                        <div className={styles['introduce']}>
                            <div className={styles['score-name']}>{scoreDetails['name'] || ''}</div>
                            <div className={styles['score-hot']}>
                                <div className={styles['singer']}>
                                    <span>{scoreDetails['singer'] || ''}</span>
                                </div>
                                <div className={styles['singer-hot']}>
                                    <img src="http://mobuz-live.oss-cn-hangzhou.aliyuncs.com/web/icon/icon_redu_gray%402x.png" alt="热门"/>
                                    <span>{scoreDetails['hot']}</span>
                                </div>
                            </div>
                            {/* <div className={styles['score-desc']}>往后余生的介绍，原调C，为了你们更好的学习我们简化了和弦，男孩子可以夹1品，女生可以不用夹往后余生的介绍，原调C，为了你们更好的学习我们简化了和弦，男孩子可以夹1品，女生可以不用夹往后余生的介绍，原调C，为了你们更好的学习我们简化了和弦，男孩子可以夹1品，女生可以不用夹往后余生的介绍，原调C，为了你们更好的学习我们简化了和弦，男孩子可以夹1品，女生可以不用。</div> */}
                            <div className={styles['download']} title="下载曲谱">
                                {
                                    (() => {
                                        if (scoreDetails && scoreDetails['img']) {
                                            const scoreCellImg = scoreDetails['img'].split(',');
                                            return (
                                                <div onClick = {
                                                    () => downloadScoreFromLibrary(scoreCellImg, scoreDetails['name'],this)
                                                }>
                                                    
                                                    {
                                                        (()=>{
                                                            if (loading) {
                                                                return(
                                                                    <span className={styles['download-loading']}></span>
                                                                )
                                                            } else {
                                                                return (
                                                                    <img src="https://mobuz-live.oss-cn-hangzhou.aliyuncs.com/web/icon/icon_download%402x.png" alt="下载"/>
                                                                )
                                                            }
                                                        })()
                                                    }
                                                    
                                                    <span className={styles['download-btn']}>{loading ? 'loading...': '下载曲谱'}</span>
                                                </div>
                                            )
                                        }
                                    })()
                                }
                            </div>
                        </div>
                    </div>
                </div>
                {/* 曲谱轮播 */}
                
                {
                    (()=>{
                        if (scoreDetails && scoreDetails['img']) {
                            const img = scoreDetails['img'].split(',');
                            return (
                                <ScoreSwiper data={img}/>
                            )
                        }
                    })()
                }
                <div className={styles['warn']}>本曲谱来源于网络网友上传，如有版权相关问题请与悦器社官方联系</div>
                <div className={styles['shortcut']}>
                    <p>手机或者微信搜谱更方便哦！还有专属歌曲免费教学。</p>
                    <div className={styles['shortcut-item']}>
                        <div>
                            <img src="http://mobuz-mp.cdn.bcebos.com/matter/mp_qr_code.jpg" alt="小程序"/>
                            <span>微信小程序</span>
                        </div>
                        <div>
                            <img src="http://mobuz-live.oss-cn-hangzhou.aliyuncs.com/web/matter/image/app_download_qrcode.png" alt="APP下载" />
                            <span>免费教学</span>
                        </div>
                    </div>
                </div>
                {/* 底部 */}
                <FooterItem/>
            </div>
        )
    }
    componentDidMount (){
        const { acquireMusicScoreDetails } = this.props;
        // 获取url参数
        const score_id = getQueryString('score_id');
        const state = getQueryString('state');
        // 请求详情数据
        acquireMusicScoreDetails(score_id);
        this.setState({
            state
        })
        // window.onresize = () => {
        //     let size = document.documentElement.clientWidth;
        //     if (size <= 1192) {
        //         size = 1192
        //     }
        //     this.setState({
        //         winWidth: size + 'px',
        //     })
        // };
        
        // window.onscroll = function () {
        //     console.log(this.scrollY)
        // }
    }
}

const mapState = (state) => ({
    scoreDetails: state.scoreParticulars.scoreDetails || {},
});

const mapDispatch = (dispatch) => ({
    acquireMusicScoreDetails (id) {
        dispatch(actionCreators.acquireMusicScoreDetails({
            actionType: actionTypes.Obtain_Music_Score_Details,
            id: id
        }))
    },
    // 下载曲谱
    async downloadScoreFromLibrary(imgList, name, self) {
        // let actionTypesData = {categoryIndex: type}
        // dispatch(actionCreators.downloadScoreFromLibrary(imgList, actionTypesData));
        // 阻止重复下载
        if (self.state.loading) return false;
        self.setState({
            loading: true
        })
        // 开始下载
        let data = await downloadFileFromLibrary(imgList, name, 'songlibs');
        // 恢复下载
        if (data) {
            self.setState({
                loading: false
            })
        }
        // console.log(imgList, name, '....imgList, name')
    }
});

export default connect(mapState, mapDispatch)(withRouter(ScoreParticulars));